<style>
.avatar {
    /*margin-top: 15px;*/
    /*margin-left: 5px;*/
    display: inline-block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: 2px solid #ccc;
    box-shadow: 0 0 5px #ccc;
}
/*#search {*/
/*    width: 300px;*/
/*    border: 1px solid #ddd*/
/*}*/

/*#searchBtn {*/
/*    height: 32px;*/
/*    color: #ffffff;*/
/*    background-color: #be7d67;*/
/*    font-size: 15px;*/
/*    padding: 5px 30px;*/
/*}*/

#second {
    border: 1px solid #ddd
}

#goodsType {
    position: absolute;
    left: 20%;
    font-size: 20px;
    padding: 20px 20px;
}
.list-container {
    text-align: right;
    background-color: #abc4ab;
}
.list-container ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.list-container li {
    display: inline-block;
    margin-right: 10px;
}

#logo{
    margin-left: 25px;
    margin-top: 10px;
}
#logo_name{
    font-style: italic;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* 为包含file控件的label添加样式 */
/*.custom-file-upload {
    border: 1px #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #fff;
    color: #000;
    text-align: center;
}*/
</style>

<div id="top" >
    <div class="list-container">
        <span style="float: left">
            <img id="logo" src="image/bg.jpg" width="45" height="45" alt=""/>
            <span id="logo_name">拼多多</span>
        </span>
        <ul>
            <li><a href="index2.html">商家模式</a></li>
            <li><a href="index.html">主页</a></li>
            <li><a id="loginHref" href="login.html" >登录</a></li>
            <li>|</li>
            <li><a href="register.html " target="_blank">注册</a></li>
            <li>|</li>
            <li><a href="writeInviteCode.html">填写邀请码</a></li>
            <li>|</li>
            <li><a href="user?method=logout" id="logout">注销</a></li>
<!--            <li><a href="userInfo.html"><img id="photo" src="image/head_photo.jpg" class="avatar" alt="用户头像"></a></li>-->
            <li><a href="userInfo.html">个人信息</a></li>
            <li><a href="rank.html" id="salesRank">购买榜</a></li>
            <li><a href="orderList.html" id="myOrder">我的订单</a></li>
            <li>|</li>
            <li><a href="cart.html" id="cart">购物车</a></li>
        </ul>
    </div>
    <div id="second" >
        <span id="goodsType"  ></span>
        <!--<label for="selectList"></label><select id="selectList" style="margin-top: 2%;margin-left: 35%">
            <option value="1">订单数</option>
            <option value="2">评分</option>
        </select>-->
        <form class="form-inline pull-right" style="margin-top: 40px;margin-right: 10px;">
            <div class="form-group">
                <label>
                    <input type="text" id="search" class="form-control" style="width: 400px"  placeholder="搜索一下好东西...">
                </label>
            </div>
            <button id="searchBtn"  type="button" class="btn btn-warning"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
        </form>
    </div>
</div>


<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function (){
        /*//后台获取用户头像
        const headers = {};
        if (localStorage.token) {
            headers['Authorization'] = `${localStorage.token}`;
        }
        $.ajax({
            url:"/PDD/user?method=getUserInfo",
            dataType:"json",
            type:"post",
            headers:headers,
            success:function (uData){
                console.log(uData)
                if(uData.code===401){
                    window.location.href="login.html"
                }else{
                    $("#photo").attr("src", "image/" + uData.data[0].headPhoto);
                }

            },
            error: function(XMLHttpRequest, textStatus, errorThrown){   // 请求失败执行的回调函数
                // 处理失败后的响应数据
                alert("获取数据出错, 错误信息：" + textStatus + " " + errorThrown);
            }
        })*/

        /*//头像点击
        $("#photo").click(function (){
            $.ajax({
                url:"/PDD/user?method=checkLoginState",
                dataType:"json",
                success:function (result){
                    //alert(result.data)
                    if(result.code===401){
                        window.location.href="login.html"
                    }else{
                        window.location.href="userInfo.html"
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(textStatus + ": " + errorThrown);
                }
            })
        })*/

        /*//获取商品展示方式(订单数/评分)
        let selectedValue = $("#selectList").val()
        $('#selectList').on('change', function() {
            selectedValue = $(this).val(); // 获取选中的选项的值
            console.log(`您选择了 ${selectedValue}`);
        });*/
        //获取商品分类
        $.ajax({
            url: "/PDD/type?method=findAllType",
            type: "GET",
            dataType: "json",
            success: function (data) {
                let tData=data.data
                //i是下标
                for (let j in tData) {
                    let html = $(`<a href="/PDD/goodsList.html?tId=${tData[j].tId}">${tData[j].tName}&nbsp;&nbsp;&nbsp;</a>`);
                    $("#goodsType").append(html);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(textStatus + ": " + errorThrown);
            }
        })

        //登录
        let loginHref=$("#loginHref")
        loginHref.click(function (){
            // 在需要验证用户登录的页面中，读取cookie中的token并向后台发送验证请求
            let username = getCookie("autoUser");
            if (username!=null) {
                // 发送验证请求，验证token是否有效
                // 如果验证成功，允许用户访问
                loginHref.attr("href","/PDD/index.html")
                //window.location.href="index.html"
                // 如果验证失败，跳转到登录页面
            } else {
                // 跳转到登录页面
                loginHref.attr("href","/PDD/login.html")
                //window.location.href="login.html"
            }
        })
        // 读取cookie中名为"autoUser"的键值对
        function getCookie(name) {
            let cookies = document.cookie.split("; ");
            for (let i = 0; i < cookies.length; i++) {
                let pair = cookies[i].split("=");
                if (pair[0] === name) {
                    return pair[1];
                }
            }
            return null;
        }

        //搜索按钮点击
        $("#searchBtn").click(function (){
            let search = $("#search");
            if(search.val()===""){
                search.css("border","1px solid red");
            }else{
                window.location.href="/PDD/goodsList.html?name="+search.val()
                // //输入不为空 发送ajax请求
                // $.ajax({
                //     url:"/PDD/goodsList.html?name="+search.val(),
                //     type:"POST",
                //     success:function (){
                //         window.location.href="/PDD/goodsList.html"
                //     }
                // })
            }
        })

        //购物车点击
        /*$("#cart").click(function (){
            window.location.href="cart.html"
            /!*$.ajax({
                url:"/PDD/user?method=checkLoginState",
                dataType:"json",
                success:function (result){
                    //alert(result.data)
                    if(result.code===401){
                        window.location.href="login.html"
                    }else{
                        window.location.href="cart.html"
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(textStatus + ": " + errorThrown);
                }
            })*!/
        })*/

        /*//查看我的订单点击
        $("#myOrder").click(function (){
            window.location.href="orderList.html"
            /!*$.ajax({
                url:"/PDD/user?method=checkLoginState",
                dataType:"json",
                success:function (result){
                    if(result.code===401){
                        window.location.href="login.html"
                    }else{
                        window.location.href="orderList.html"
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(textStatus + ": " + errorThrown);
                }
            })*!/
        })*/


        //购买榜点击事件
        $("#salesRank").click(function (){
            $.ajax({
                url:"/PDD/user?method=checkLoginState",
                dataType:"json",
                success:function (result){
                    //alert(result.data)
                    if(result.code===401){
                        window.location.href="login.html"
                    }else{
                        window.location.href="rank.html"
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(textStatus + ": " + errorThrown);
                }
            })
        })

        /*//点击更换头像触发file控件点击事件
        $("#change").click(function (){
            $("#myFile").click()
        })*/



    })
</script>